<template>
  <div class="home">
    <!-- 引入shade组件 -->
    <shede></shede>
    <!-- 容器 -->
    <el-container>
      <!-- 头部 -->
      <el-header>
        <!-- 引入Header组件 -->
        <Header> </Header>
      </el-header>
      <!-- 容器 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :style="{ width: widthState ? '64px' : '200px' }">
          <!-- 引入Aside组件 -->
          <Aside> </Aside>
        </el-aside>
        <!-- 主要内容 -->
        <el-main>
          <!-- 弹窗 -->
          <div class="popUp" v-show="popUPState">
            <!-- 遍历authName数组 -->
            <div class="popUp-content" v-for="(item, index) in authName" :key="index">
              <!-- 引入Avatar图标 -->
              <el-icon size="20px"> <Avatar /> </el-icon>
              <h3>{{ item.authName }}</h3>
            </div>
          </div>
          <!-- 引入Main组件 -->
          <Main></Main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
// 引入组件
import shede from '@/components/shade/index.vue'
import Aside from '@/views/home/Aside/index.vue'
import Header from '@/views/home/Header/index.vue'
import Main from '@/views/home/Main/index.vue'
import { useCounterStore } from '@/stores/counter'
import { Avatar } from '@element-plus/icons-vue'
// 使用store
const counterStore = useCounterStore()
// 定义变量
const widthState = ref(counterStore.iconState)
const popUPState = ref(counterStore.popUP)
const authName = ref()
// 监听store的变化
watch(
  () => counterStore.iconState,
  (newVal) => {
    widthState.value = newVal
  },
)
watch(
  () => counterStore.popUP,
  (newVal) => {
    popUPState.value = newVal
  },
)
watch(
  () => counterStore.authName,
  (newVal) => {
    authName.value = newVal
  },
)
</script>

<style scoped lang="scss">
// 样式
.home {
  position: relative;
  .el-header {
    background-color: #373f41;
  }

  .el-aside {
    height: 91.5vh;
    background-color: #333744;
  }

  .el-main {
    background-color: #eaedf1;
  }
  .popUp {
    position: absolute;
    top: 10%;
    left: 5.5%;
    .popUp-content {
      display: inline-block;
      padding: 3px 15px;
      background-color: #333744;
      display: flex;
      align-content: center;
      align-items: center;
      .el-icon {
        color: #909399;
      }
      h3 {
        color: #fff;
        margin: 5px 0px 5px 10px;
      }
    }
  }
}
</style>
